<template>
  <el-row class="message-container">
    <el-row>
      <h1 class="message-title">{{ $t('pageOverview.systemInformation') }}</h1>
    </el-row>
    <el-row class="message-body">
      <el-col :span="8">
        <overview-server />
      </el-col>
      <el-col :span="8">
        <overview-firmware />
      </el-col>
      <el-col :span="8">
        <overview-network />
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <router-link
          class="view-more-link"
          to="/system-management/system-information"
        >
          {{ $t('pageOverview.viewMore') }}
        </router-link>
      </el-col>
      <el-col :span="8">
        <router-link class="view-more-link" to="/settings/firmware">
          {{ $t('pageOverview.viewMore') }}
        </router-link>
      </el-col>
      <el-col :span="8">
        <router-link class="view-more-link" to="/settings/network">
          {{ $t('pageOverview.viewMore') }}
        </router-link>
      </el-col>
    </el-row>
  </el-row>
</template>

<script>
import { mapState } from 'vuex';
import { Row, Col } from 'element-ui';
import OverviewFirmware from './OverviewFirmware.vue';
import OverviewServer from './OverviewServer';
import OverviewNetwork from './OverviewNetwork';

export default {
  name: 'Message',
  components: {
    [Row.name]: Row,
    [Col.name]: Col,
    OverviewServer,
    OverviewFirmware,
    OverviewNetwork,
  },
  computed: {
    ...mapState({
      server: (state) => state.system.systems[0],
      serverModel() {
        return this.server?.model;
      },
      serverSerialNumber() {
        return this.server?.serialNumber;
      },
    }),
  },
  created() {
    this.$store.dispatch('system/getSystem').finally(() => {
      this.$root.$emit('overview-server-complete');
    });
  },
};
</script>
<style scoped>
.message-container {
  border-radius: 5px;
  background-color: #fff;
  .el-row {
    padding: 20px 30px 20px;
  }
}
.message-title {
  font-size: 22px;
}
.view-more-link {
  color: #409eff;
  text-decoration: none;
}
</style>
